<template>
  <div id="poster">
    <el-form
      class="registerContainer"
      label-position="left"
      :rules="rules"
      ref="registerForm"
      :model="registerForm"
      label-width="0px"
    >
      <h3 class="registeTitle">
        <div>注册</div>
      </h3>

      <el-form-item prop="username">
        <el-input
          class="registerInput"
          type="text"
          prefix-icon="el-icon-user"
          placeholder="请输入用户名"
          v-model="registerForm.username"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input
          class="registerInput"
          type="password"
          prefix-icon="el-icon-lock"
          placeholder="请输入密码"
          v-model="registerForm.password"
          show-password
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item prop="password2">
        <el-input
          class="registerInput"
          type="password"
          prefix-icon="el-icon-lock"
          placeholder="请再次输入密码"
          v-model="registerForm.password2"
          show-password
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button id="registButton" type="primary" @click="regist()"
          >注册</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button id="backButton" type="primary" @click="back"
          >返回登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import apiConfig from "../config/apiConfig";

export default {
  name: "Register",
  data() {
    return {
      registerForm: {
        username: "",
        password: "",
        password2: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 10, message: "用户名长度在2-10个字符" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 20, message: "密码长度在6-20个字符", trigger: "blur" },
        ],
        password2: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
          { validator: this.validatePassword2, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    validatePassword2(rule, value, callback) {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerForm.password) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    },
    regist() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          this.axios.post(apiConfig.regist, this.registerForm).then((res) => {
            if (res.data.code === 200) {
              this.$message({
                message: "注册成功",
                type: "success",
              });
              this.registerForm = {};
              this.$router.push("/login");
            }
          });
        }
      });
    },
    back() {
      this.$router.push("/");
    },
  },
};
</script>

<style>
.registerContainer {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 35px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
.registeTitle {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.el-input.registerInput .el-input__inner:focus {
  border-color: #505458; /* 修改为你想要的颜色 */
  outline: 0; /* 去掉默认的聚焦轮廓 */
}
#registButton {
  width: 100%;
  background-color: #505458;
  border: none;
}
#backButton {
  width: 100%;
  background-color: #505458;
  border: none;
}
</style>
